import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import {WeaRichText, WeaPopoverHrm,WeaLocaleProvider} from 'ecCom';
import FeedBack from '../../../public/feedback/FeedBack';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject ('planReportViewStore')
@observer
export default class Feedback extends React.Component {
  constructor (props) {
    super (props);
    this.state = {};
    this.store = this.props.planReportViewStore;
  }

  onTextareaChange = v => {
    //let {planReportViewStore} = this.props
    this.store.onInputValueChange ('feedback', v);
  };
  saveFeedback = () => {
    this.store.addPlanExchange ();
    this.store.onInputValueChange ('feedback', '');
  };

  getNameALink = (resourceid, resourcename) => {
    let href = 'javaScript:openhrm(' + resourceid + ');';
    return (
      <a href={href} onClick={e => window.pointerXY (e)} class="autoWrap">
        {resourcename}
      </a>
    );
  };
  formatFblist = list => {
    let result = [];
    list.map (v => {
      result.push ({
        operatedate: v.datetime,
        hrmid: v.hrmid,
        hrmname: v.hrmname,
        content: v.content,
      });
    });
    return result;
  };

  richTextChange = v => {
    this.store.onInputValueChange ('feedback', v);
  };

  render () {
    let {fblist} = this.store.resData;
    fblist = fblist ? toJS (fblist) : [];
    fblist = this.formatFblist (fblist);
    return (
      <div className="plan-feedback">

        {this.store.inputValue.feedback == '' ? '' : ''}
        <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@vor576`}
          ckConfig={{
            startupFocus: false,
            toolbar: [
              {name: 'document', items: ['Source']},
              {name: 'styles', items: ['Format', 'Font', 'FontSize']},
              {name: 'insert', items: ['Table', 'Smiley']},

              {
                name: 'paragraph',
                items: [
                  'JustifyLeft',
                  'JustifyCenter',
                  'JustifyRight',
                  '-',
                  'NumberedList',
                  'BulletedList',
                ],
              },
              
              {name: 'colors', items: ['TextColor']},
              {
                name: 'basicstyles',
                items: ['Bold', 'Italic', 'Underline', 'Strike'],
              },
            ],
            height: 100,
            autoGrow_minHeight: 100,
            autoGrow_maxHeight: 200,
            resize_enabled: false,
          }}
          value={this.store.inputValue.feedback}
          onChange={v => this.richTextChange (v)}
          bottomBarRight={{
            width: 100,
            Component: [
              <span
                className="wea-rich-text-toolbar-bottom-item"
                style={{position: 'relative'}}
              >
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8vre8m@submit`}
                  className="wea-button-release"
                  onClick={this.saveFeedback}
                >
                  <span>
                    <span className="icon-coms-Release" />
                    <span style={{marginLeft: '2px'}}>{getLabel('615','提交') }</span>
                  </span>
                </Button>
              </span>,
            ],
          }}
        />

        <FeedBack ecId={`${this && this.props && this.props.ecId || ''}_FeedBack@uzoh4b`} dataSource={fblist} style={{marginTop:"10px"}}/>
      </div>
    );
  }
}
